<template>
    <view class="container">
        <view class="log">
            <block v-for="(item, index) in list" :key="index">
                <uv-line v-if="index > 0"></uv-line>
                <view class="list">
                    <view class="text">
                        <view class="title">{{ item.memo }}</view>
                        <view class="time">{{ item.createtime_text }}</view>
                    </view>
                    <view class="score" :class="item.money > 0 ? 'score-2' : 'score-1'">{{ item.money }}元</view>
                </view>
            </block>

            <view class="empty" v-if="list.length < 1">
                <view style="height: 100rpx"></view>
                <image src="/static/images/empty.png" mode="widthFix" style="width: 300rpx; margin: 0 auto"></image>
            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { userMoneyLog } from '@/services/api/auth';
import { concat } from 'lodash-es';
import { useRequest } from 'alova';
import { Toast } from '@/utils/uniapi/prompt';

onLoad(() => {});

onShow(() => {
    query.page = 1;
    list.value = [];
    getData();
});
onReachBottom(() => {
    if (totalPage.value === query.page) {
        console.log('已加载全部数据');
        Toast('已加载全部数据');
        return;
    }
    query.page++;
    getData();
});

onPullDownRefresh(() => {
    console.log('刷新');
    list.value = [];
    query.page = 1;
    getData();
});

const query = reactive({
    page: 1,
    limit: 10,
});

const list = ref([]);
const totalPage = ref(0);
const { send: getUserMoneyLog } = useRequest(userMoneyLog, { immediate: false });
const getData = () => {
    getUserMoneyLog(query).then((res: any) => {
        console.log(res);
        totalPage.value = res.last_page;
        list.value = concat(list.value, res.data);
        uni.stopPullDownRefresh();
    });
};
</script>
<style lang="scss">
.log {
    padding: 30rpx;
    .list {
        padding: 24rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .text {
            width: 500rpx;
            .title {
                font-size: 28rpx;
                color: #221c0b;
            }
            .time {
                margin-top: 24rpx;
                font-size: 24rpx;
                color: #999999;
            }
        }
        .score {
            display: inline-flex;
            align-items: center;
        }
        .score-1 {
            color: #fd4e59;
        }
        .score-2 {
            color: #2385f3;
        }
    }
}
</style>
